<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "demo_page.css";
			@import "demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="jquery.js"></script>
		<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
			<script type="text/javascript" charset="utf-8">
		$( "#userForm" ).submit(function( event ) {
				var x = ($('#userForm #firstName').val() == "") || 
				($('#userForm #lastName').val() == "") || 
				($('#userForm #password').val() == "") || 
				($('#userForm #emailId').val() == "") ||
				(!validateEmail($('#userForm #emailId').val()));
				if(x){
				alert("Please enter valid input.")
				return false;
				}else return true;
				});
		
		</script>
		<style type="text/css">

.button_example{
border:1px solid #cacaca; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #E6E6E6; background-image: -webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#CCCCCC));
 background-image: -webkit-linear-gradient(top, #E6E6E6, #CCCCCC);
 background-image: -moz-linear-gradient(top, #E6E6E6, #CCCCCC);
 background-image: -ms-linear-gradient(top, #E6E6E6, #CCCCCC);
 background-image: -o-linear-gradient(top, #E6E6E6, #CCCCCC);
 background-image: linear-gradient(to bottom, #E6E6E6, #CCCCCC);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E6E6E6, endColorstr=#CCCCCC);
}

.button_example:hover{
 border:1px solid #b3b3b3;
 background-color: #cdcdcd; background-image: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#b3b3b3));
 background-image: -webkit-linear-gradient(top, #cdcdcd, #b3b3b3);
 background-image: -moz-linear-gradient(top, #cdcdcd, #b3b3b3);
 background-image: -ms-linear-gradient(top, #cdcdcd, #b3b3b3);
 background-image: -o-linear-gradient(top, #cdcdcd, #b3b3b3);
 background-image: linear-gradient(to bottom, #cdcdcd, #b3b3b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cdcdcd, endColorstr=#b3b3b3);
}
</style>
</head>
<body>
			<div class="offset3 span6">
			  <form class="form-horizontal" name="userForm" id="userForm" action="addUser" method="post">
				<div class="control-group">
				  <label class="control-label login-label " for="firstName">First Name</label>
				  <div class="controls">
					<input type="text" id="firstName" placeholder="First Name" name="firstName" />
				  </div>
				</div>
				<div class="control-group">
				  <label class="control-label login-label " for="lastName">Last Name</label>
				  <div class="controls">
					<input type="text" id="lastName" placeholder="Last Name" name="lastName" />
				  </div>
				</div>
				<div class="control-group">
				  <label class="control-label login-label " for="emailId">Email Id</label>
				  <div class="controls">
					<input type="text" id="emailId" placeholder="Email Id" name="emailId" />
				  </div>
				</div>
				<div class="control-group">
				  <label class="control-label login-label " for="password">Password</label>
				  <div class="controls">
					<input type="password" id="password" placeholder="Password" name="password"  />
				  </div>
				</div>
				<div class="control-group">
				  <label class="control-label login-label " for="role">Role</label>
				  <div class="controls">
					<select id="role" name="role">
					  <option value="Admin">Admin</option>
					  <option value="Maker">Maker</option>
					  <option value="Checker">Checker</option>
					  <option value="Auditor">Auditor</option>
					</select>
				  </div>
				</div>
				<div class="control-group">
				  <div class="controls">
					<!-- <label class="checkbox"> <input type="checkbox" disabled> Remember me
					</label><br> -->
					<button type="submit" class="button" id="signIn"><i ></i> Sign in</button>
				  </div>
				</div>
			  </form>
			</div>
			
</body>
</html>